<template>
<view class="content">
  <topHeight></topHeight>
  <view v-for="item in list">
  <view>{{item.title}}</view>
  <view :class="item.class"
        @click="click(item.click)"
  >
    <text>{{item.content}}</text>
  </view>
  </view>
  <ClearClass v-show="isCancel"
              @clearClass="clearClass"
              @cancel="cancel"
              :showClearClass="showClearClass"
  ></ClearClass>
  <Success v-show="showSuccess"></Success>
  <view v-show="isCancel" class="clear-model"></view>
</view>
</template>

<script>
let that=null;
import ClearClass from "@/components/ClearClass";
import topHeight from "@/components/top-height";
import Success from "@/components/Success";

export default {
name: "Set",
  components:{
    ClearClass,
    topHeight,
    Success,
  },
  data(){
  return{
    showClearClass:false,
    showSuccess:false,
    isCancel:false,
    list:[
      {
        title:'课程表',
        content:'清除课表背景图',
        class:'clear',
        click:'cancel',
      },
      {
        title:'We武院',
        content:'关于we武院',
        class:'about',
        click:'toAbout',
      },
    ],
  }
  },
  created() {
    that=this;
  },
  watch:{
    showClearClass:
        function(){
          this.showSuccess=true;
          setTimeout(function(){that.showSuccess=!that.showSuccess},1000);
      },
      deep:true,
  },
  methods:{
  click(e){
    this[e]();
  },
    toAbout(){
    uni.navigateTo({
      url:'About'
    })
  },
    clearClass(){
      this.showClearClass=!this.showClearClass;
      this.isCancel=!this.isCancel;
    },
    cancel(){
      this.isCancel=!this.isCancel;
    }
  },
  mounted() {

  },
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100vh;
  background-color: #F1F1F1;
  padding: 30rpx;
  .clear{
    background-color: #FFFFFF;
    height: 100rpx;
    width: 100%;
    font-size: 40rpx;
    border-radius: 25rpx;
    box-shadow: 0 0 5rpx #E6E6E6;
    line-height: 100rpx;
    text-align: center;
    margin: 15rpx 0 40rpx;
  }
  .about{
    background-color: #85A5FF;
    height: 100rpx;
    width: 100%;
    font-size: 40rpx;
    border-radius: 25rpx;
    box-shadow: 0 0 5rpx #E6E6E6;
    line-height: 100rpx;
    text-align: center;
    color: #FFFFFF;
    margin-top: 15rpx;
  }
  .clear-model{
    z-index: 500;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
}
</style>

